<template>
  <div id="NewsInformation">
    <!-- 轮播图 -->
    <div class="swiper">
      <el-carousel height="350px">
        <el-carousel-item v-for="item in 1" :key="item">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            src="../assets/img/home/u13.png"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row class="nav wrap" :gutter="40">
      <el-col :span="5" :xs="24">
        <div class="nav-l">
          <div class="nav-a">{{ navName }}</div>
          <div
            class="nav-list"
            v-for="(item, index) in navList"
            :key="index"
            @click="navBtn(item, index)"
          >
            <div
              :class="
                navIndex == index ? 'nav-list-text-active' : 'nav-list-text'
              "
              style="width: 60%"
            >
              {{ item.name }}
            </div>
            <div
              :class="
                navIndex == index ? 'nav-list-text-active' : 'nav-list-text'
              "
            >
              <i class="header-tit el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="news" :span="16" :xs="24">
        <div class="news-title">{{ newsText }}</div>
        <div class="news-b">
          <div class="news-b-list cu" v-for="(item, index) in newsList" :key="index">
            <div class="news-b-list-l" v-if="item.publishedAt">
              <h2>{{ item.publishedAt.slice(8,10) }}</h2>
              <h6>{{ item.publishedAt.slice(2,7) }}</h6>
            </div>
            <div class="news-b-list-r">
              <h4 class="cz1">{{item.title}}</h4>
              <h6 class="cz1">{{item.title}}</h6>
            </div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 15px" v-if="getWidth > 767">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div style="text-align: center; margin-top: 15px" v-if="getWidth < 767">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { get } from "../api";
export default {
  name: "NewsInformation",
  data() {
    return {
      navList: [],
      navIndex: 0,
      navName: "",
      newsText: "",
      newsId: 0,
      newsList: [],
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条目数
      getWidth: '',
    };
  },
  created() {},
  mounted() {
    this.getWidth = $(document.body).width();
    this.getUrlData()
  },
  methods: {
    getUrlData() {
      this.navIndex = this.$route.query.navIndex2;
      this.navName = this.$route.query.navName;
      this.getNavList();
      if (this.navList.length > 0) {
        this.newsText = this.navList[this.navIndex].name;
        this.newsId = this.navList[this.navIndex].id;
        this.getNews(this.newsId);
      }
    },
    getNavList() {
      this.$store.state.header.forEach((item) => {
        if (item.name == this.navName) {
          this.navList = item.children;
        }
      });
    },
    navBtn(item, index) {
      this.navIndex = index;
      this.newsText = item.name;
      this.newsId = item.id;
      this.getNews(item.id);
    },
    //新闻资讯请求
    async getNews(id) {
      let data = {
        id: id,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      try {
        const response = await get("/con/content/pageByCategoryId", data);
        this.newsList = response.resData.result;
        this.total = response.resData.total;
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    },
    //新闻资讯详情跳转
    newsBtn(item, index) {
      this.$router.push({
        path: '/Article',
        query: { id: item.id, title: item.title},
      });
    },
    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.getNews(this.newsId);
    },
    // 当前页改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getNews(this.newsId);
    },
  },
};
</script>
<style scoped>
#NewsInformation {
  background: #0000000e;
  padding-bottom: 30px;
}
.wrap {
  max-width: 1300px;
  margin: 30px auto 0 !important;
}
.nav-l {
  /* height: 350px; */
  border-radius: 5px;
  background: #ffffff;
  padding-bottom: 10px;
}
.nav-a {
  width: 100%;
  height: 80px;
  background: #004098;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  padding-left: 20px;
  line-height: 80px;
}
.news-b-list {
  height: 100px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0000001d;
}
.news-b-list-l {
  width: 70px;
  height: 70px;
  background: #004098;
}
.news-b-list-l h2, .news-b-list-l>h6{
  display: block;
  color: #ffffff;
  margin: 1px;
  text-align: center;
  margin-top: 10px;
}
.news-b-list-r {
  width: 80%;
  height: 70px;
  margin-left: 10px;
}
.news-b-list-r h2, h4{
  margin: 0px !important;
}
.news-b-list-r h6{
  text-indent: 20px;
  color: #00000090;
}
.nav-list {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  height: 45px;
  align-items: center;
  border-bottom: 1px solid #0e0d0d11;
  cursor: pointer;
}
.nav-list-text {
  font-weight: bold;
  color: #0e0d0d9a;
}
.nav-list-text-active {
  font-weight: bold;
  color: #004098;
}
.news {
  background: #ffffff;
  line-height: 40px;
  border-bottom: 1px solid #0e0d0d47;
}
.news-title {
  max-width: 150px;
  border-bottom: 2px solid #004098;
  color: #004098;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
}
/**轮播图 */
.swiper {
  margin: auto;
  overflow: hidden;
}
</style>

